<template>
  <div>
    <el-card shadow="always">
      <div class="header">
        文章标题 :
        <el-input v-model.trim="title"
                  class="title"
                  placeholder="请输入标题"></el-input>
        <div class="switch">
          <el-switch v-model="isRead"
                     @change="changeIsRead" />
          <span>{{text}}</span>
        </div>
        <div class="skill">
          <div :key="tag.id"
               :class="getTagCls(tag)"
               @click="chooseTag(tag)"
               v-for="tag in skillList">
            {{tag.title}}
          </div>
        </div>
      </div>
      <mavon-editor v-model="content"
                    :ishljs="true"
                    ref="md"
                    @imgAdd="imgAdd" />
      <div class="footer">
        <el-button type="danger"
                   @click="submit">保存</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { addArticle, getArticle, updateArticle } from "@/api/article";
import { getSkillList } from "@/api/skill";
import { getQiniuToken } from "@/api/image";

import { Message } from "element-ui";
export default {
  data() {
    return {
      title: "",
      isRead: true,
      content: `请开始你的表演`,
      text: "可读",
      token: "",
      domain: "http://qn.ztsky.cn/",
      skillList: []
    };
  },
  async created() {
    await this.getSkillList();
    await this.getArticle();
    await this.getQiniuToken();
  },
  methods: {
    init() {
      this.title = "";
      this.isRead = true;
      this.content = "请开始你的表演";
      this.text = this.isRead ? "可读" : "不可读";
    },
    async getSkillList() {
      const data = await getSkillList();
      this.skillList = data;
    },
    async getQiniuToken() {
      const { token } = await getQiniuToken();
      this.token = token;
    },
    async getArticle() {
      if (!this.atricleId) {
        return this.init();
      }
      const { title, content, status, skills } = await getArticle(
        this.$route.query.id
      );
      this.title = title;
      this.isRead = status === 1 ? true : false;
      this.content = content;
      this.text = this.isRead ? "可读" : "不可读";
      const skills_id = skills.map(_ => _.id);
      this.skillList = this.skillList.map(_ => {
        if (skills_id.includes(_.id)) {
          return {
            ..._,
            checked: true
          };
        }
        return _;
      });
    },
    getTagCls(item) {
      if (item.checked) {
        return "tag tag-checked";
      }
      return "tag";
    },
    chooseTag(item) {
      const { id } = item;
      this.skillList = this.skillList.map(_ => {
        if (id === _.id) {
          return { ..._, checked: !_.checked };
        }
        return _;
      });
    },
    async imgAdd(pos, $file) {
      const formdata = new FormData();
      formdata.append("token", this.token);
      formdata.append("file", $file);
      const headers = { "Content-Type": "multipart/form-data" };
      const { data } = await this.$http({
        method: "post",
        url: "//upload-z0.qiniu.com/",
        data: formdata,
        headers
      });
      const url = `${this.domain}${data.key}`;
      this.$refs.md.$img2Url(pos, url);
    },
    async submit() {
      if (!this.title) {
        this.$message({
          message: "请填写标题",
          type: "error",
          center: true,
          duration: 5 * 1000
        });
        return;
      }
      const html = this.$refs.md.d_render;
      const skill = this.skillList.filter(_ => !!_.checked).map(_ => _.id);
      const article = {
        title: this.title,
        status: this.isRead ? 1 : 2,
        content: this.content,
        html,
        skill
      };
      if (!this.atricleId) {
        await addArticle(article);
      } else {
        await updateArticle(this.atricleId, article);
      }
      Message({
        message: this.atricleId ? "编辑成功" : "添加成功",
        type: "success",
        center: true,
        duration: 2 * 1000
      });
      this.$router.push({ name: "atricleList" });
    },
    changeIsRead(status) {
      this.text = status ? "可读" : "不可读";
    }
  },
  computed: {
    atricleId() {
      const { id } = this.$route.query;
      return id || null;
    }
  },
  watch: {
    $route() {
      this.getArticle();
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
  .title {
    width: 400px;
  }
  .switch {
    margin-top: 20px;
    font-weight: bold;
  }
  .skill {
    display: flex;
    margin-top: 20px;
    .tag {
      margin-right: 10px;
      cursor: pointer;
      transition: all 0.2s ease-in;
      padding: 5px 10px;
      background-color: rgba(144, 147, 153, 0.4);
      border-color: rgba(144, 147, 153, 0.9);
      color: #909399;
      border-radius: 3px;
    }
    .tag-checked {
      background: rgb(255, 85, 0);
      color: #fff;
    }
  }
}
.footer {
  padding: 15px;
  text-align: right;
}
</style>
